<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom )+'px'}">
		<navbar title="场地预约"></navbar>
		<view class="content form" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<!-- <view class="headTitle">
				场地预约
			</view> -->
			<view class="title">
				场地介绍
			</view>
			<view class="venueInformation">
				<view class="left">
					<view class="p">
						场地名称：{{detail.title}}
					</view>
					<view class="p">
						地址：{{detail.addr}}
					</view>
				</view>
				<view class="right" @click="copy(detail.addr)">
					点击复制
				</view>
			</view>
			<view class="title">
				联系人
			</view>
			<input type="text" class="purpose" v-model="form.name" placeholder-class="purposeP" placeholder="请填写联系人" />
			<view class="title">
				联系方式
			</view>
			<input type="text" class="purpose" v-model="form.tel" placeholder-class="purposeP" placeholder="请填写联系方式" />
			<view class="title">
				场地用途
			</view>
			<input type="text" class="purpose" v-model="form.yongtu" placeholder-class="purposeP"
				placeholder="请填写场地用途" />

			<view class="title">
				需求日期
			</view>
			<view style="width: 100%;">
				<van-row gutter="12">
					<van-col span="24">
						<view class="selectDate">
							<uni-datetime-picker type="date" :clear-icon="false" placeholder="请选择日期"
								v-model="form.date" />
						</view>
					</van-col>
				</van-row>
				<view class="title">
					需求时间
				</view>
				<van-row gutter="12">
					<van-col span="12">
						<view class="selectDate">
							<picker @change="(e)=>bindPickerChange(e,'timeStart')" mode="time">
								<view class="form-select">
									<uni-easyinput type="text" v-model="form.timeStart" class="shadow"
										placeholder="请选择" disabled />
									<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
								</view>
							</picker>

						</view>
					</van-col>
					<van-col span="12">
						<view class="selectDate">
							<picker @change="(e)=>bindPickerChange(e,'timeEnd')" mode="time">
								<view class="form-select">
									<uni-easyinput type="text" v-model="form.timeEnd" class="shadow"
										placeholder="请选择" disabled />
									<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
								</view>
							</picker>
						</view>
					</van-col>
				</van-row>
			</view>
		</view>
		<!-- <view class="submit">
			<button class="btn">确认提交</button>
		</view> -->
		<!-- <Tabber currentPagePath="user"></Tabber> -->

		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
			<view class="main-button-open" @click="submit">
				确认提交
			</view>
		</view>

		<view class="main-bj">

		</view>
		
		<!-- 底部登录弹窗 -->
		<van-popup position="bottom" :show="show" :z-index="2300" class="reloadMore" closeable close-icon="close" close-icon-position="top-right" @close="NotLoginBottomClose">
			<NotLoginBottom ref="NotLoginBottomRef"></NotLoginBottom>
		</van-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue'
	import Tabber from '@/pages/common/Tabber.vue'
	import NotLoginBottom from '@/components/NotLoginBottom.vue'
	import {
		getCataOne,
		cataSubmit
	} from "@/core/web-api/common.js"
	import dayjs from "dayjs"
	import { validateFunc } from "@/utils/util.js"
	export default {
		data() {
			return {
				theMonthDay: 30,
				toDay: 0,
				toYear: 0,
				toMonth: 0,
				isTimePeriod: false,
				isCalendar: false,
				form: {
					date: "",
					changdi: "",
					cnt: "",
					name: "",
					tel: "",
					timeEnd: "",
					timeStart: "",
					type: 0,
					yongtu: ""
				},
				detail: {},
				range: [

				],
				show:false,
			}
		},
		components: {
			Tabber,
			Navbar,
			NotLoginBottom
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['youkeType'])
		},
		methods: {
			bindPickerChange(val,type){
				type=="timeEnd"? this.endChange(val.detail.value):this.startChange(val.detail.value)
			},

			submit() {
				let title = this.validate();
				if (title) {
					uni.showToast({
						title,
						icon: "none"
					})
					return;
				}
				const data = {
					changdi: this.detail.title,
					name: this.form.name,
					tel: this.form.tel,
					timeEnd: this.form.timeEnd,
					timeRiqi: this.form.date,
					timeStart: this.form.timeStart,
					type: 2,
					yongtu: this.form.yongtu
				}
				cataSubmit(data).then(res => {
					if (res.code == 20000) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					})
				})
			},

			validate() {
				const dist = {
					yongtu: "用途",
					timeEnd: "结束时间",
					timeStart: "开始时间",
					date: "日期",
					tel: "联系方式",
					name: "姓名"
				}
				let flag = "";
				for (let key in dist) {
					let code = validateFunc(this.form[key], key);
					if (code == 0) {
						flag = dist[key] + "为必填项"
					} else if (code == 1) {
						flag = dist[key] + "格式错误"
					}
				}
				return flag;

			},

			endChange(val) {
				this.form.timeEnd = val;
				if (!this.form.timeStart) return;
				if (new Date(val).getTime() > new Date(this.form.timeStart).getTime()) {
					uni.showToast({
						title: "结束时间不可以小于开始时间",
						icon: "none"
					})
					this.form.timeEnd = "";
					return;
				}
			},

			startChange(val) {
				this.form.timeStart = val;
				if (!this.form.timeEnd) return;
				if (new Date(val).getTime() < new Date(this.form.timeEnd).getTime()) {
					uni.showToast({
						title: "开始时间不可以大于结束时间",
						icon: "none"
					})
					this.form.timeStart = "";
					return;
				}
			},
			copy(text) {
				uni.setClipboardData({
					data: text,
					success() {
						uni.showToast({
							title: "复制成功",
							icon: "success"
						})
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: "复制失败",
							icon: "none"
						})
					}
				})
			},
			getMonthDay() {
				let days = new Date(this.$data.toYear, this.$data.toMonth + 1, 0).getDate()
				return days
			},
			showCalendar() {
				this.$data.isCalendar = !this.$data.isCalendar;
			},
			showTimePeriod() {
				this.$data.isTimePeriod = !this.$data.isTimePeriod;
			},
			getDetail() {
				getCataOne({
					cataName: "场地预约"
				}).then(res => {
					if (res.code == 20000) {
						this.detail = res.data.detail
					}
				})
			},

			setTimeList() {
				let list = []
				for (let i = 0; i <= 23; i++) {
					list.push({
						text: i <= 9 ? "0" + i : i,
						value: i <= 9 ? "0" + i : i,
					})
				}
				this.range = list;
			},
			NotLoginBottomClose(){
				uni.navigateBack()
			}
		},
		mounted() {
			const date = new Date();
			this.$data.toYear = date.getFullYear();
			this.$data.toMonth = date.getMonth() + 1;
			this.$data.toDay = dayjs().format("D") - 1;
			this.$data.theMonthDay = this.getMonthDay();
		},
		onLoad() {
			this.setTimeList();
			this.getDetail();
			if(this.youkeType){
				this.show=true
			}
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			text-align: center;
			font-size: 30upx;
			display: flex;
			justify-content: center;
			padding: 0 30upx;
			box-sizing: border-box;

			&-open {
				width: 100%;
				border-radius: 10upx;
				height: 80upx;
				font-size: 30upx;
				line-height: 80upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}
	}
	
	.form{
		&-select {
			position: relative;
		
			&-icon{
				position: absolute;
				right: 20upx;
				height: 60upx;
				display: flex;
				align-items: center;
				top: 0;
			}
		}
		
		/deep/ .uni-easyinput__content:not(.is-textarea) {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
		}
		
		/deep/ .uni-easyinput {
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}
		
		/deep/ .uni-select {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}
		
		/deep/ .uni-forms-item__label {
			padding-bottom: 25upx;
		
			text {
				font-size: 30upx;
				color: #000;
			}
		}
		
		/deep/ .uni-easyinput__content.is-disabled {
			color: #333;
		}
		
		/deep/ .uni-date__x-input {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
			margin-left: 10upx;
		}
		
		/deep/ .input-value {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
		}
		
		/deep/ .checklist-box {
			&:last-child {
				margin-right: 0;
			}
		}
	}

	.content {
		width: 100%;
		position: relative;
		padding: 80rpx 50upx 0;
		padding-top: 30upx;
		box-sizing: border-box;
	}

	.headTitle {
		width: 100%;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 38rpx;
		color: #000000;
		margin-bottom: 82rpx;
	}

	.title {
		width: 100%;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
		padding-left: 10rpx;
		box-sizing: border-box;
		margin-top: 30upx;
		margin-bottom: 15upx;

		&:first-child {
			margin-top: 80upx;
		}
	}

	.venueInformation {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 7rpx rgba(220, 220, 220, 0.35);
		border-radius: 10rpx;
		padding: 21rpx 20rpx 27rpx 26rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.left {
			flex: 1;
			padding-right: 20upx;
			box-sizing: border-box;
		}
	}

	.venueInformation .p {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 25rpx;
		color: #4D4D4D;
	}

	.venueInformation .p:first-child {
		margin-bottom: 10rpx;
	}

	.venueInformation .right {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #708AFF;
	}

	.purpose {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 7rpx rgba(220, 220, 220, 0.35);
		border-radius: 10rpx;
		margin-bottom: 43rpx;
		padding-left: 26rpx;
		box-sizing: border-box;
	}

	.purposeP {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
	}

	.selectDate {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 7rpx rgba(220, 220, 220, 0.35);
		border-radius: 10rpx;
		position: relative;
	}

	.selectDate .sel {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 18rpx 16rpx;
		box-sizing: border-box;
	}

	.selectDate .span {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
	}

	.calendar,
	.selectTime {
		position: absolute;
		left: 0;
		top: 60rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 7rpx rgba(220, 220, 220, 0.35);
		border-radius: 10rpx;
		padding: 19rpx 18rpx 20rpx;
		box-sizing: border-box;
	}

	.calendar .header {
		width: 100%;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 17rpx;
	}

	.calendar .dayBox {
		width: 100%;
		overflow: hidden;
	}

	.calendar .dayBox .span {
		width: 35rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 23rpx;
		text-align: center;
		color: #666666;
		display: inline-block;
	}

	.calendar .dayBox .span.no {
		color: #989898;
	}

	.selectTime {
		padding-top: 30rpx;
	}

	.selectTime .p {
		width: 100%;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 23rpx;
		color: #666666;
		margin-bottom: 23rpx;
	}

	.selectDate .p.no {
		color: #989898;
	}

	.submit {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 50rpx;
		left: 0;
	}

	.submit .btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(-1deg, #6FABFD, #5371FD);
		border-radius: 10rpx;
		text-align: center;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>